<template>
  <el-dialog v-model="commentDialogFormVisible" title="请编辑对学员此次面试的评价" width="1000">
    <div class="interview-info">
      <div class="every-row">
        <span class="title">面试公司</span>
        <span class="value">{{summitData.company_name}}</span>
      </div>
      <div class="every-row">
        <span class="title">面试轮次</span>
        <span class="value">{{summitData.interview_rounds}}</span>
      </div>
      <div class="every-row">
        <span class="title">面试结果</span>
        <span class="value">{{summitData.interview_result}}</span>
      </div>
      <div class="every-row">
        <span class="title">面试时间</span>
        <span class="value">{{summitData.interview_time}}</span>
      </div>
    </div>
    <el-input
          v-model="comment"
          style="width: 800px;"
          rows=12
          type="textarea"
          placeholder="请输入对学员此次面试的评价，主要包含优缺点以及需要改进的地方"
      />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="commentDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="commentDialogFormVisible = false">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import EventBus from "@/plugins/event-bus";
import {ref} from "vue";
let commentDialogFormVisible = ref(false);
let comment = ref("");
let summitData = ref({});
EventBus.on("interview-comment-event", (updateInterviewData)=>{
  commentDialogFormVisible.value = true;
  summitData.value = updateInterviewData;
  comment.value = updateInterviewData.lecturer_comment;
})


</script>

<style scoped lang="less">
.interview-info{
  margin: 0 auto;
  margin-bottom: 20px;
  width: 800px;
  text-align: left;
  border: 1px solid #DCDFE6;
  .every-row{
    border: 1px solid #DCDFE6;
    height: 30px;
    line-height: 30px;
    .title{
      border-right: 2px solid #DCDFE6;
      display: inline-block;
      width: 120px;
      text-align: right;
      margin-right: 10px;
      padding-right: 10px;
      font-weight: bold;
    }
    .value{
      display: inline-block;
    }
  }
}
</style>